<template>
	<view class="endtime_view">
		<slot name="initslot" :initdata="{ config: ENDTIME_CONFIG, show: ENDTIME_SHOW, timing }"></slot>
	</view>
</template>

<script>
let ENDTIME_TASK = null;
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'endtime',
	props: {
		begintime: {
			type: [String, Number],
			default: '',
		},
		donetime: {
			type: [String, Number],
			default: '',
		},
		maxUnit: {
			type: String,
			default: 'minute',
		},
	},
	data() {
		return {
			ENDTIME_CONFIG: {},
			ENDTIME_SHOW: {},
			timing: false,
			init_endtime_config: true,
			SERVER_DIFF: 0,
		};
	},
	created() {},
	destroyed() {
		clearTimeout(ENDTIME_TASK);
		ENDTIME_TASK = null;
	},
	methods: {
		init_components() {
			let _this = this;
			_this.init_task();
		},
		init_task() {
			let _this = this;
			_this.init_date(_this.donetime);
			if (_this.timing) {
				ENDTIME_TASK = setTimeout(() => {
					_this.init_task();
				}, 1000);
			} else {
				clearTimeout(ENDTIME_TASK);
				ENDTIME_TASK = null;
				_this.$emit('taskcallback');
			}
		},
		init_date(TARGET) {
			let _this = this,
				START_DATE,
				END_DATE,
				SERVER_DATE,
				START_TIME,
				LOCAL_TIME,
				END_TIME,
				SERVER_TIME,
				DIFF,
				day,
				day_second = 86400,
				hour,
				hour_second = 3600,
				minute,
				minute_second = 60,
				// 倒计时用的日时分秒
				show_day = 0,
				show_hour = 0,
				show_minute = 0,
				show_second = 0;

			START_DATE = new Date();
			END_DATE = new Date(TARGET);

			LOCAL_TIME = START_DATE.getTime();
			END_TIME = END_DATE.getTime();

			if (_this.init_endtime_config) {
				// 服务器与本地的时间差值
				SERVER_DATE = new Date(_this.begintime);
				SERVER_TIME = SERVER_DATE.getTime();
				_this.SERVER_DIFF = SERVER_TIME - LOCAL_TIME;

				// 初始化年月日
				let ENDTIME_CONFIG = {
					// 获取结束时间的年月日时分秒
					end_year: END_DATE.getFullYear(),
					end_month: END_DATE.getMonth() + 1,
					end_day: END_DATE.getDate(),
					end_hour: END_DATE.getHours(),
					end_minute: END_DATE.getMinutes(),
					end_second: END_DATE.getSeconds(),
				};

				_this.ENDTIME_CONFIG = ENDTIME_CONFIG;
				_this.init_endtime_config = false;
				console.log(ENDTIME_CONFIG);
			}
			START_TIME = LOCAL_TIME + _this.SERVER_DIFF;
			DIFF = Math.floor((END_TIME - START_TIME) / 1000);
			if (DIFF > 0) {
				_this.timing = true;
				switch (_this.maxUnit) {
					case 'day':
						show_day = parseInt(DIFF / day_second);
						show_hour = parseInt((DIFF % day_second) / hour_second);
						show_minute = parseInt(((DIFF % day_second) % hour_second) / 60);
						show_second = parseInt(((DIFF % day_second) % hour_second) % 60);
						break;
					case 'hour':
						show_hour = parseInt(DIFF / hour_second);
						show_minute = parseInt(((DIFF % day_second) % hour_second) / 60);
						show_second = parseInt(((DIFF % day_second) % hour_second) % 60);
						break;
					case 'minute':
						show_minute = parseInt(DIFF / minute_second);
						show_second = parseInt(((DIFF % day_second) % hour_second) % 60);
						break;
				}
			} else {
				_this.timing = false;
			}
			_this.ENDTIME_SHOW = {
				show_day: _this.tows(show_day),
				show_hour: _this.tows(show_hour),
				show_minute: _this.tows(show_minute),
				show_second: _this.tows(show_second),
			};
		},

		tows(n) {
			return n >= 0 && n < 10 ? '0' + n : '' + n;
		},
	},
	watch: {
		donetime: {
			handler(newVal) {
				// console.log(newVal, 'skuid')
				this.init_endtime_config = true;
				this.init_components();
			},
			immediate: true,
			deep: true,
		},
	},
};
</script>

<style lang="scss"></style>
